<template>
	<div>
        <!-- 头部 -->
        <div class="ui-header-item gradient">
            <div class="ui-header-arraw prev" @click="handleHistory" @touchstart.stop>
                <i class="iconfont icon iconjiantou-zuo-cuxiantiao"></i>
            </div>
            <div class="ui-header-title">发表评价</div>
            <div class="ui-header-arraw next flex-row align-center" @touchstart.stop @click="handleHome">
                <i class="iconfont icon iconi-home"></i>
            </div>
        </div>
        <!-- 表单内容 -->
        <div class="ui-mode-content flex1" id="container" ref="scroll">
            <van-form validate-first>
                <div class="mt-food-comment"
                    :key="i"
                    v-for="(item,i) in public_goods_order_detail_list"
                >
                    <div class="mt-food-img">
                        <img :src="formatImgUrl(item.goods_main_image)">
                        <div class="mt-foot-doux">{{item.goods_name}}</div>
                        <div class="grade">
                            <van-field name="rate" label="" class="grade-rate">
                                <template #input>
                                    <van-rate v-model="item.comment_star"/>
                                </template>
                            </van-field>
                        </div>
                        <textarea name="comment_desc" class="mt-food-add" placeholder="宝贝满足你的期待吗？说说你的使用心得，分享给想买的他们吧" v-model="item.comment_desc"></textarea>
                    </div>
                    <div>
                        <van-button default block type="info" color="#2398aa" native-type="submit" @click="submit(item)">发布</van-button>
                    </div>
                </div>
            </van-form>
        </div>
    </div>
</template>
<script>
import mixinCommon from '@/views/content/mixins/common';
import mixinRequest from '@/views/content/mixins/request';
export default {
    name: 'category/evaluate',
    data() {
        return {
            public_agent_info:{},
            public_user_info:{},
            public_goods_order_record:{},
            public_goods_order_detail_list:[],
            sending:false
        }
    },
    mixins:[
        mixinCommon,
        mixinRequest
    ],
    components:{
    },
    computed:{
    },
    watch:{
    },
    created(){
    },
    mounted(){
        if(!this.$route.query.id){
            return this.showMessage('进入非法').then(()=>{
                this.handleHistory();
            });
        };
        this.init();
    },
    methods:{
        // 初始化
        init(){
            this.showLoading();
            this.getShopInfo().then(({result,response})=>{
                this.getPageInfo({
                    name:'book.order.detail',
                    param:{
                        invoke_method:'details_4_order',
                        id_public_goods_order_record:this.$route.query.id
                    }
                }).then(({result,response})=>{
                    this.public_goods_order_record=result.public_goods_order_record||{};
                    if(result.public_goods_order_detail_list&&result.public_goods_order_detail_list.length){
                        result.public_goods_order_detail_list.forEach(item => {
                            if(!item.comment_star){
                                item.comment_star=5;
                                item.comment_desc='';
                            }
                        });
                    }
                    this.public_goods_order_detail_list=result.public_goods_order_detail_list||[];
                });
            }).catch(({msg})=>{
                this.showResult(msg,true);
            });
        },
        /*
         * 获取门店信息
         */
        getShopInfo(){
            return new Promise((resolve,reject)=>{
                this.$http.post({
                    name:'common.shop.info',
                    data:{
                        invoke_method:'user_and_shop_info'
                    },
                    loading:{
                        enabled:false
                    }
                }).then(({result,response})=>{
                    this.public_agent_info=result.public_agent_info||{};
                    this.public_user_info=result.public_user_info||{};
                    this.setState({
                        key:'public_agent_info',
                        value:this.public_agent_info
                    });
                    this.setState({
                        key:'public_user_info',
                        value:this.public_user_info
                    });
                    resolve({result,response});
                }).catch(({msg})=>{
                    reject({msg});
                });
            });
        },
        // 提交表单
		submit(item) {
            console.log(item)
            if(!item.comment_desc){
                this.showToast('需要填写新得之后才能评论哦~~',false);
                return;
            }
            if(!this.sending){
                this.sending=true;
                this.$http.post({
                    name:'book.detail.comment',
                    data:{
                        invoke_method:'update_detail_comment',
                        pre_db_para_id_public_goods_order_record:this.$route.query.id,
                        id_public_goods_info:item.id_public_goods_info,
                        comment_star:item.comment_star,
                        comment_desc:item.comment_desc 
                    },
                    loading:{
                        enabled:true
                    }
                }).then(({result,response})=>{
                    this.sending=false;
                    this.showToast('评论成功~~',true);
                }).catch(({msg})=>{
                    this.sending=false;
                    this.showMessage(msg);
                });
            }
		}
    },
    beforeDestroy(){
    }
}
</script>
<style lang="less" scoped>
.mt-food-comment {
    position: relative;
    box-shadow: 0px 1.8px 15px #c5c6cc;
    margin: 0.373rem;
    border: 1px solid #e8eaf1;
    padding: 0.426rem;
    border-radius: 0.2rem;
    .mt-food-img{
        height:8.4rem;
        & img {
            float: left;
            width: 3.86rem;
        }
        .mt-foot-doux {
            margin-left: 4.3rem;
            width: 50%;
            font-size: 0.64rem;
            color: #8c8c8c;
            border-bottom: 1px solid #c4c4c4;
        }
        .grade {
            position: absolute;
            left: 4.8rem;
            height: 1.14rem;
            float: left;
            margin-top: 0.3rem;
            .grade-rate{
                padding:0;
            }
        }
        .mt-food-add {
            display:block;
            position: absolute;
            top: 4.5rem;
            right: 0.4rem;
            left: 0.4rem;
            margin-top: 0.4rem;
            color: #8c8c8c;
            font-size: 0.64rem;
            float: left;
            height: 3rem;
            border: 1px solid #bdbdbd;
            border-radius: 0.2rem;
            padding: 0.4rem 0.4rem;
            background: #f0f2f8;
            line-height:1.2em;
        }
    }
    
}
</style>
<style>
.van-field__control{
    font-size:.8rem;
}
.ui-message-btm{
	margin-right:.27rem;
	width:5.33rem;
	height:1.81rem;
	border-radius:.1rem;
	background-color:#FFF3F3;
	border-color:#FFF3F3;
	color:#EC4040;
}
.login-jump-wrap{
    margin:0 .85rem;
    line-height:1.2em;
    font-size:.8rem;
    color:#666;
}
</style>